﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<fmt:setBundle basename="ApplicationMessage" />

<!DOCTYPE html>
<html lang="zh-CN">
<head>

  <%@ include file="/WEB-INF/include/meta.jsp"%>
  <%@ include file="/WEB-INF/include/css.jsp"%>

</head>

<body class="ihg-theme-draft">

  <%@ include file="/WEB-INF/include/header.jsp"%>
  <jsp:include page="/WEB-INF/include/submenu-session.jsp">
    <jsp:param name="currentUrl" value="${ctx.host}/sessions/${sessionCalibration.session.id}" />
  </jsp:include>

  <div class="container-fluid ihg-container has-ihg-sidemenu">

    <div class="ihg-breadcrumb">
      <ol class="breadcrumb border-breadcrumb no-bottom-border">
        <li class="active"><fmt:message key="assessor.482" /></li>
      </ol>
      <div class="pull-right">
        <a href="${ctx.host}/sessions/${sessionCalibration.session.id}/report-check" style="color: #155CB2;"><<&nbsp;<fmt:message key="assessor.376-1" /></a>
      </div>
    </div>

    <div class="ihg-content-layout" style="margin-top: 0px;">
      <div class="report-preview">
        <div class="report-preview-header clearfix">
          <img src="${sessionCalibration.delegate.avatar}" style="width: 100px; height: 100px;">
          <div class="intro">
            <p><fmt:message key="assessor.446" /> ${sessionCalibration.delegate.name}</p>
            <p><fmt:message key="delegate.email" /> ${sessionCalibration.delegate.email}</p>
            <p><fmt:message key="delegate.hotel" /> ${sessionCalibration.delegate.hotelName}</p>
            <p><fmt:message key="assessor.447" /> ${sessionCalibration.delegate.jobTitle}</p>
          </div>
        </div>
        <div class="report-preview-body">
          <div class="title"><fmt:message key="assessor.448" /> <fmt:message key="assessor.378" /></div>
          <div>
            <table class="table table-condensed">
              <thead>
                <th style="font-size: 18px;"><fmt:message key="assessor.409" /></th>
                <th style="font-size: 18px;"><fmt:message key="assessor.449" /></th>
              </thead>
              <tbody>
                <c:forEach var="competency" items="${competencies}">
                  <tr>
                    <td style="width: 30%;"><fmt:message key="${competency.message}" /></td>
                    <td><span class="color-${competency.score.s ? 'bottle-green' : (competency.score.c ? 'peak-green' : 'red')}"><fmt:message key="${competency.score.message}"/> (${competency.score.alias})</span></td>
                  </tr>
                </c:forEach>
              </tbody>
            </table>
            <c:if test="${!sessionTask.status.finish}">
              <div class="text-right">
                <a href="${ctx.host}/sessions/${sessionCalibration.session.id}/peer-calibrations/${sessionCalibration.id}/edit-competency-evaluation" class="btn btn-default" data-target="#editCompetencyEvaluation" data-toggle="modal"><fmt:message key="assessor.64" /></a>
              </div>
            </c:if>
          </div>
        </div>

        <div class="report-preview-body">
          <div>
            <div class="title" style="margin-bottom: 15px;"><fmt:message key="assessor.450" /> <fmt:message key="assessor.380" /></div>
              <c:if test="${recommendation.simpleHotel}">
                <div style="font-size: 16px; margin: 5px 0;">
                  <div class="checked-style">
                    <input type="checkbox" name="" checked> <label></label>
                  </div>
                  <span style="font-weight: bold; margin-right: 10px;"><fmt:message key="${recommendation.simpleHotelResult.message}" /></span>for
                  <div class="checked-style" style="margin-left: 10px; margin-right: 0;">
                    <input type="checkbox" name="" checked> <label></label>
                  </div>
                  <span style="font-weight: bold;"><fmt:message key="assessor.440" /></span>
                </div>
              </c:if>
              <c:if test="${recommendation.averageHotel}">
                <div style="font-size: 16px; margin: 5px 0;">
                  <div class="checked-style">
                    <input type="checkbox" name="" checked> <label></label>
                  </div>
                  <span style="font-weight: bold; margin-right: 10px;"><fmt:message key="${recommendation.averageHotelResult.message}" /></span>for
                  <div class="checked-style" style="margin-left: 10px; margin-right: 0;">
                    <input type="checkbox" name="" checked> <label></label>
                  </div>
                  <span style="font-weight: bold;"><fmt:message key="assessor.439" /></span>
                </div>
              </c:if>
              <c:if test="${recommendation.complexHotel}">
                <div style="font-size: 16px; margin: 5px 0;">
                  <div class="checked-style">
                    <input type="checkbox" name="" checked> <label></label>
                  </div>
                  <span style="font-weight: bold; margin-right: 10px;"><fmt:message key="${recommendation.complexHotelResult.message}" /></span>for
                  <div class="checked-style" style="margin-left: 10px; margin-right: 0;">
                    <input type="checkbox" name="" checked> <label></label>
                  </div>
                  <span style="font-weight: bold;"><fmt:message key="assessor.438" /></span>
                </div>
              </c:if>
              <div style="border: 1px solid #C4C5C9; padding: 8px; font-size: 16px;">
                ${recommendation.comment}<br><br>
              </div>
              <c:if test="${!sessionTask.status.finish}">
                <div class="text-right" style="margin-top: 20px;">
                  <a href="${ctx.host}/sessions/${sessionCalibration.session.id}/peer-calibrations/${sessionCalibration.id}/edit-readiness-recommendation" class="btn btn-default" data-target="#editReadinessRecommendation" data-toggle="modal"><fmt:message key="assessor.64" /></a>
                </div>
              </c:if>
            </div>
          </div>

          <div class="report-preview-body">
            <form>
              <div class="title"><fmt:message key="assessor.451" /> <fmt:message key="assessor.465" /></div>
              <div class="clearfix" style="border-bottom: 1px solid #C55A11;">
                <div class="col-xs-6">
                  <span class="color-erythrine" style="font-size: 20px; font-weight: bold;"><fmt:message key="assessor.452" /></span>
                </div>
                <div class="col-xs-6">
                  <span class="color-erythrine" style="font-size: 20px; font-weight: bold;"><fmt:message key="assessor.453" /></span>
                </div>
              </div>
              <div style="border-bottom: 1px solid #C55A11;">
                <div class="focus-item clearfix">
                  <div class="col-xs-6">
                    <strong style="font-size: 18px;"><fmt:message key="${comment.strengthOne.message}" />&nbsp;-&nbsp;${comment.strengthOneTitle}${comment.strengthOneOther}:</strong>${comment.strengthOneComment} 
                  </div>
                  <div class="col-xs-6 ">
                    <strong style="font-size: 18px;"><fmt:message key="${comment.dnOne.message}" />&nbsp;-&nbsp;${comment.dnOneTitle}${comment.dnOneOther}:</strong>${comment.dnOneComment}
                  </div>
                </div>
                <div class="focus-item clearfix">
                  <div class="col-xs-6">
                    <strong style="font-size: 18px;"><fmt:message key="${comment.strengthTwo.message}" />&nbsp;-&nbsp;${comment.strengthTwoTitle}${comment.strengthTwoOther}:</strong>${comment.strengthTwoComment} 
                  </div>
                  <div class="col-xs-6 ">
                    <strong style="font-size: 18px;"><fmt:message key="${comment.dnTwo.message}" />&nbsp;-&nbsp;${comment.dnTwoTitle}${comment.dnTwoOther}:</strong>${comment.dnTwoComment}
                  </div>
                </div>
                <div class="focus-item clearfix">
                  <div class="col-xs-6">
                    <strong style="font-size: 18px;"><fmt:message key="${comment.strengthThree.message}" />&nbsp;-&nbsp;${comment.strengthThreeTitle}${comment.strengthThreeOther}:</strong>${comment.strengthThreeComment} 
                  </div>
                  <div class="col-xs-6 ">
                    <strong style="font-size: 18px;"><fmt:message key="${comment.dnThree.message}" />&nbsp;-&nbsp;${comment.dnThreeTitle}${comment.dnThreeOther}:</strong>${comment.dnThreeComment}
                  </div>
                </div>
              </div>

              <c:if test="${!sessionTask.status.finish}">
                <div class="text-right" style="margin-top: 20px;">
                  <a href="${ctx.host}/sessions/${sessionCalibration.session.id}/peer-calibrations/${sessionCalibration.id}/edit-recommendations" data-target="#editDevelopmentRecommendations" data-toggle="modal" class="btn btn-default"><fmt:message key="assessor.64" /></a>
                </div>
              </c:if>
            </form>
          </div>

          <div class="report-preview-body">
            <form>
              <div class="title"><fmt:message key="assessor.454" /> <fmt:message key="assessor.455" /></div>
              <div class="clearfix" style="border-bottom: 1px solid #C55A11;">
                <div class="col-xs-4">
                  <span class="color-erythrine" style="font-size: 20px; font-weight: bold;"><fmt:message key="assessor.456" /></span>
                </div>
                <div class="col-xs-8">
                  <span class="color-erythrine" style="font-size: 20px; font-weight: bold;"><fmt:message key="assessor.455" /></span>
                </div>
              </div>
              <div style="border-bottom: 1px solid #C55A11;">
                <div class="focus-item clearfix">
                  <div class="col-xs-4">
                    <strong style="font-size: 18px;"><fmt:message key="${comment.suggestOne.message}" />&nbsp;-&nbsp;${comment.suggestOneTitle}:</strong>
                  </div>
                  <ul class="col-xs-8" style="padding-left: 40px;">
                    <li>${comment.suggestOneComment}</li>
                  </ul>
                </div>
                <div class="focus-item clearfix">
                  <div class="col-xs-4">
                    <strong style="font-size: 18px;"><fmt:message key="${comment.suggestTwo.message}" />&nbsp;-&nbsp;${comment.suggestTwoTitle}:</strong>
                  </div>
                  <ul class="col-xs-8" style="padding-left: 40px;">
                    <li>${comment.suggestTwoComment}</li>
                  </ul>
                </div>
                <div class="focus-item clearfix">
                  <div class="col-xs-4">
                    <strong style="font-size: 18px;"><fmt:message key="${comment.suggestThree.message}" />&nbsp;-&nbsp;${comment.suggestThreeTitle}:</strong>
                  </div>
                  <ul class="col-xs-8" style="padding-left: 40px;">
                    <li>${comment.suggestThreeComment}</li>
                  </ul>
                </div>
              </div>
              <c:if test="${!sessionTask.status.finish}">
                <div class="text-right" style="margin-top: 20px;">
                  <a href="${ctx.host}/sessions/${sessionCalibration.session.id}/peer-calibrations/${sessionCalibration.id}/edit-recommendations" data-target="#editDevelopmentRecommendations" data-toggle="modal" class="btn btn-default"><fmt:message key="assessor.64" /></a>
                </div>
              </c:if>
            </form>
          </div>
          
          <div class="report-preview-body">
            <form>
              <div class="title"><fmt:message key="assessor.454-1" /> <fmt:message key="assessor.455-1" /></div>
              <c:forEach var="calibrationCompetencie" items="${sessionCalibrationCompetencies}">
              <div class="clearfix" style="margin-top: 20px; padding: 0 15px 15px 15px;">
                <span class="color-erythrine" style="font-size: 20px; font-weight: bold;"><fmt:message key="${calibrationCompetencie.message}" /></span>
                <span class="color-erythrine pull-right" style="font-size: 14px; font-weight: bold;"><span class="color-${calibrationCompetencie.score.s ? 'bottle-green' : (calibrationCompetencie.score.c ? 'peak-green' : 'red')}"><fmt:message key="${calibrationCompetencie.score.message}"/> (${calibrationCompetencie.score.alias})</span></span>
              </div>
              <div class="clearfix">
                <div class="col-xs-6">
                  <fmt:message key="assessor.455-2" />
                </div>
                <div class="col-xs-6">
                  <fmt:message key="assessor.455-3" />
                </div>
              </div>
              <div class="clearfix" style="border-bottom: 1px solid #C55A11; padding-bottom: 10px;">
                <div class="col-xs-6">
                  <div>
                  ${calibrationCompetencie.effective}
                  </div>
                </div>
                <div class="col-xs-6">
                  <div>
                  ${calibrationCompetencie.inEffective}
                  </div>
                </div>
              </div>
              </c:forEach>
            </form>
          </div>
          
          
        </div>
      </div>
    </div>

    <%@ include file="/WEB-INF/include/footer.jsp"%>
    <%@ include file="/WEB-INF/include/script.jsp"%>
    <d:resource root="${ctx.resource}/build" type="script" src="js/page/session/during/peer-calibration/report-edit.js" />
    <script type="text/javascript">
      require([ 'page/session/during/peer-calibration/report-edit' ], function(page) {
        page.init();
      })
    </script>
</body>

</html>
